<div class="filesWrapper"
     ng-class="{scrollTableSave: (!vm.search && vm.folder.children.length > 8) || (vm.search && vm.numResults > 4),
                scrollTableOpen: (!vm.search && vm.folder.children.length > 11) || (vm.search && vm.numResults > 5)}">
  <div class="headerWrapper">
    <table ng-show="vm.hasResults">
      <thead>
      <tr>
        <th class="nameCell" ng-click="vm.sortFiles(vm._name)">
          <div class="headerLabel">{{::vm.nameHeader}}</div>
          <div class="sortWrapper">
            <div class="sort"
                 ng-class="{sortUp: vm.sortState === 1 && vm.sortField === vm._name,
                            sortDown: vm.sortState === 2 && vm.sortField === vm._name}"></div>
          </div>
        </th>
        <th class="typeCell" ng-click="vm.sortFiles(vm._type)">
          <div class="headerLabel">{{::vm.typeHeader}}</div>
          <div class="sortWrapper">
            <div class="sort"
                 ng-class="{sortUp: vm.sortState === 1 && vm.sortField === vm._type,
                            sortDown: vm.sortState === 2 && vm.sortField === vm._type}"></div>
          </div>
        </th>
        <th class="dateCell" ng-click="vm.sortFiles(vm._date)">
          <div class="headerLabel">{{::vm.lastSaveHeader}}</div>
          <div class="sortWrapper">
            <div class="sort"
                 ng-class="{sortUp: vm.sortState === 1 && vm.sortField === vm._date,
                            sortDown: vm.sortState === 2 && vm.sortField === vm._date}"></div>
          </div>
        </th>
      </tr>
      </thead>
    </table>
  </div>

  <div class="bodyWrapper">
    <table ng-class="{searchTable: vm.search, hasVertScroll: vm.getFileAreaWidth()}">
      <tbody>
      <tr ng-repeat="file in vm.getFiles(vm.folder.children) | orderBy:file:vm.sortReverse:vm.compareFiles "
          ng-click="vm.selectFile(file)"
          ng-dblclick="vm.commitFile(file); $event.stopPropagation();"
          ng-class="{selected: vm.selectedFile === file}"
          ng-hide="file.inResult === false"
          title="{{file.name}}&#013;{{file.path}}">
        <td class="nameCell">
          <div class="fileTypeIcon"
               ng-class="{'file-trans': file.type === 'transformation',
                          'file-job': file.type === 'job',
                          'file-folder': file.type === 'folder'}"></div>
          <div class="fileName">
            <edit value="file.name" on-complete="vm.rename(file, name)" auto="file.autoEdit" on-start="vm.onStart(file)"></edit>
          </div>
          <div class="fileLocation">{{file.path}}</div>
        </td>
        <td class="typeCell">
          <div class="fileType">{{file.type}}</div>
        </td>
        <td class="dateCell">
          <div class="fileLastSaved">
            <span>{{file.date | date: 'MM/dd/yy hh:mm a'}}</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="fileAreaMessageView" ng-show="!vm.hasResults && vm.search.length > 0">{{::vm.noResults}}</div>
